<template>
  <view>
    <nav-bar title="我的客户"></nav-bar>
    <scroll-view scroll-y :style="{ height: mainHeight }" class="content">
      <tab-index @tabClick="tabClick"></tab-index>
      <view class="tab-list">
        <view v-for="(item, index) in tabData" :key="index" :class="['tab-box', activeIndex === index ? 'active' : 'tab']"
          @click="handelClick(item, index)">
          <view>{{ item.name }}</view>
          <view class="line" v-if="activeIndex === index"></view>
        </view>
      </view>
      <view class="time-box">
        <view class="text">时间</view>
        <view class="date">
          <uni-datetime-picker :clear-icon="false" v-model="range" type="daterange" @change="maskClick" />
        </view>
        <!-- <view class="time-list">
          <view>{{ beginTime }}-{{ endTime }} </view>
          <view class="icon"><u-icon name="arrow-down" color="#6f6f6f" size="15"></u-icon></view>
        </view> -->
      </view>
      <view class="member">
        <view style="margin-right: 25rpx;">新客户：1人;</view>
        <view>回头客：13人;</view>
      </view>
      <view class="member">
        复购客户：13人
      </view>
      <view class="table">
        <view class="head">
          <view style="width: 14%;">客户姓名</view>
          <view style="width: 20%;margin: 0 6%">客户手机号</view>
          <view style="width: 20%;">门店消费次数</view>
          <view style="width: 20%;">我的服务次数</view>
          <view style="width: 14%;">客户类型</view>
        </view>
        <view class="box" v-for="(item, index) in tableData" :key="index">
          <view style="width: 15%;">{{ item.name }}</view>
          <view style="width: 35%;">{{ item.phone }}</view>
          <view style="width: 15%;">{{ item.number }}次</view>
          <view style="width: 15%;">{{ item.times }}次</view>
          <view style="width: 15%; margin-left: 5%;">{{ item.type === 1 ? '复购客' : '回头客' }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue'
import tabIndex from '../../components/statis/tab-index.vue'
export default {
  name: 'member',
  components: { NavBar, tabIndex },
  data() {
    return {
      mainHeight: '',
      activeIndex: 0,
      range:[],
      tabData: [
        {
          name: '消费次数排序'
        },
        {
          name: '服务次数排序'
        }
      ],
      beginTime: '2023.5.30',
      endTime: '2023.5.30',
      tableData: [
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        },
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        },
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        },
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        }
      ]
    }
  },
  created() {
    this.mainHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
    // this.getTableHead()
  },
  methods: {
    tabClick(item) {
    },
    handelClick(item, index) {
      this.activeIndex = index
    },
    getTableHead() {
      this.tableData.unshift({
        name: '客户姓名',
        phone: '客户手机号',
        number: '门店消费次数',
        times: '我的服务次数',
        type: '客户类型'
      })
    },
    maskClick(e){
			}
    // handelClick(item) {
    //   uni.navigateTo({
    //     url: `/subPages/order/${item}`,
    //   })
    // }

  }

}
</script>

<style lang="scss" scoped>
.content {
  padding: 30rpx;
}

.tab-list {
  display: flex;
  margin-top: 25rpx;

  .tab-box {
    position: relative;
    margin-right: 35rpx;
  }

  .active {
    font-size: 45rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    color: #333333;
  }

  .tab {
    font-size: 41rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #666666;
  }

  .line {
    width: 42rpx;
    height: 13rpx;
    background: #C27E15;
    border-radius: 13rpx 13rpx 13rpx 13rpx;
    opacity: 1;
    position: absolute;
    bottom: -20rpx;
    left: 40%;
  }
}

.time-box {
  margin-top: 40rpx;
  display: flex;

  .text {
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    margin-right: 20rpx;
    line-height: 68rpx;
  }

  .time-list {
    display: flex;
    height: 68rpx;
    background-color: #fff;
    line-height: 68rpx;
    border-radius: 12rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    padding: 0 30rpx;

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 10rpx;
    }
  }
}

.member {
  display: flex;
  font-size: 36rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  line-height: 42rpx;
  margin-top: 12rpx;

}

.table {
  width: 100%;
  background: #FFFFFF;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  opacity: 1;
  margin-top: 25rpx;

  .box {
    display: flex;
    text-align: center;
    padding: 26rpx 20rpx;
    border-bottom: 1rpx solid #E6E6E6;
    font-size: 33rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #333333;

    &:last-child {
      border-bottom: none;
    }

  }

  .head {
    display: flex;
    text-align: center;
    padding: 26rpx 20rpx;
    border-bottom: 1rpx solid #E6E6E6;
    // justify-content: space-between;
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }
}</style>